<template>
  <div id="app" style="z-index: 2">
    <!-- <router-view /> -->
    <!-- 路由每次跳转页面数据都会刷新 -->
    <transition :key="key">
      <router-view :key="key"></router-view>
    </transition>
  </div>
</template>

<script>
  import cookie from 'js-cookie'

  export default {
    name: "App",
    components: {},
    data() {
      return {
        ws: null,
        leave_page: false,
        is_first_in_page: true, // 判断是否是第一次进入页面，在 websocket 连接成功时判断是否调用子路由
        user: {}
      };
    },
    created() {
      // this.name = this.$urls.getUrlKey('Xd_Token')
      // console.log(this.$urls.getUrlKey)
    },
    methods: {
      beforeunloadHandler(event) {
        this.beforeUnloadTime = new Date().getTime();
        console.log('this.beforeUnloadTime', this.beforeUnloadTime);
        // event = event || window.event;
        // console.log(event);
        // if (event) {
        //     event.returnValue = '关闭提示';
        // }
        // return '关闭提示';
        // 新版的浏览中，已经不支持自定义弹窗。只能调用浏览器自带的提示确认窗格
      },
      unloadHandler() {
        console.log('this.beforeUnloadTime--', this.beforeUnloadTime);
        console.log(new Date().getTime() - this.beforeUnloadTime);
        let time = new Date().getTime() - this.beforeUnloadTime;
        if (time <= 5) {
          localStorage.setItem("isToken", true);
          this.$axios.getlogOut({
            token: this.user.token
          }).then((res) => {
             ;
          })
          // cookie.remove('Xd_Token')
          // localStorage.setItem('close', 1); 
          // 关闭
        } else {
          // localStorage.setItem('Refresh', 2); 
          // console.log("刷新")
          // 刷新
        }
      },
      initWebSocket() {
        let that = this;
        if ("WebSocket" in window) {
          that.ws = new WebSocket(`ws://172.16.17.108:58080/webSocket`);
          that.$wsk.setWs(that.ws);
          that.ws.onopen = function () {
            console.log("已经打开连接...");
            that.ws.send(
              JSON.stringify({
                // 连接成功将，用户ID传给服务端
                uid: cookie.get('Xd_Token'),
              })
            );
          };
          that.ws.onclose = function () {
            // 关闭 websocket
            console.log("连接已关闭...");
            setTimeout(() => {
              that.initWebSocket();
            }, 1000 * 60 * 3);
          };
          that.ws.onmessage = function (result) {
            // alert(result.data);
            this.$message({
              duration: 1000 * 60,
              showClose: true,
              message: result.data,
              type: "success",
            });
            // console.log("收到服务器的反馈信息");
            // console.log(result);
          };
        } else {
          // 浏览器不支持 WebSocket
          console.log("您的浏览器不支持 WebSocket!");
        }
      },
    },
    beforeDestroy() {
      // 销毁之前     关闭浏览器
      window.removeEventListener('beforeunload', (e) => this.beforeunloadHandler(e));
      window.removeEventListener('unload', (e) => this.unloadHandler(e));
    },
    created() {
      this.initWebSocket();
    },
    mounted() {
      this.user = JSON.parse(localStorage.getItem('employeesInformation'))
      // 关闭浏览器
      window.addEventListener('beforeunload', (e) => this.beforeunloadHandler(e));
      window.addEventListener('unload', (e) => this.unloadHandler(e));
      // this.getList()
      //  cookie.remove('Xd_Token')
      // this.$router.go(0)
    },
    // 每次路由跳转 页面都会进行刷新
    computed: {
      key() {
        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date();
        // localStorage.setItem('pageSize', 1)
        // localStorage.setItem('pageNum', 10)
      }
    }
  };
</script>
<style>
  #nav a {
    font-weight: bold;
    color: #2c3e50;
  }

  * {
    margin: 0px;
    padding: 0px;
  }

  html,
  body {
    /* padding-top: 100px; */
    /* bottom: 200px; */
    /* top: 300px; */
    /* margin-top: 300px; */
    height: 100%;
    /* overflow: auto; */
    margin: 0;
  }
  #app>div{
    width: 100%;
  }
  html {
    /* overflow-y: auto; */
  }

  ::v-deep el-select-dropdown {
    position: absolute !important;
    top: 35px !important;
    left: 0px !important;
  }
  
</style>